<template>
  <div class="container">
    <el-dialog
      title="绑定供应商类别"
      :visible.sync="dialog.centerDialogVisible"
      width="700px"
      center
      :lock-scroll="true"
      @close="hideDialog"
      @open="getData"
    >
      <div class="top">
        <el-select
          style="width: 85%;"
          v-model="supplierList"
          multiple
          filterable
          remote
          center
          clearable
          reserve-keyword
          placeholder="请选择供应商类别"
          :remote-method="supplierRemoteMethod"
          :loading="supplierCenter.loading"
        >
          <el-option
            v-for="item in supplierCenter.option"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-button
          type="primary"
          class="handleSearch"
          icon="el-icon-search"
          @click="addupplier()"
          >添加</el-button
        >
      </div>
      <el-table
        :data="formData"
        max-height="450px"
        border
        style="width: 100%; margin-top: 10px"
        ref="multipleTable"
        empty-text="暂无数据"
      >
        <el-table-column
          prop="value"
          label="供应商Code"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="label"
          label="供应商名称"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button
              class="add"
              size="small"
              type="primary"
              icon="el-icon-delete"
              @click="handleClose(scope)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideDialog">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import { selectSupplierData } from "@/api/supplier/supplierList"; //供应商
import {
  // binkSupplier,
  // getBinkSupplierList,
  getSupplierClassList,
  binkSupplierClass,
  getBinkSupplierClassList
} from "@/api/settlement/bankList";
export default {
  props: {
    dialog: Object
  },
  data() {
    return {
      formData: [],
      supplierCenter: {
        option: [],
        value: [],
        loading: false
      },
      supplierList: []
    };
  },
  methods: {
    handleSearch() {
      this.formData = [];
      this.getData();
    },
    // 嵌套搜索供应商数据
    supplierRemoteMethod(query) {
      if (query !== "") {
        this.getSupplier(query);
      } else {
        this.supplierCenter.option = [];
      }
    },
    getSupplier(name = "") {
      let data = {
        page: 1,
        limit: 1000,
        name
      };
      //获取供应商列表
      getSupplierClassList(data).then(res => {
        this.supplierCenter.option = res.data.map(item => {
          return {
            value: `${item.code}`,
            label: `${item.name}`
          };
        });
      });
    },
    getData() {
      this.getSupplier();
      let data = {
        account: this.dialog.account
      };
      getBinkSupplierClassList(data).then(res => {
        res.data.suppliser_list.forEach(item => {
          this.formData.push({
            label: item.name,
            value: item.code
          });
        });
      });
    },
    //添加
    addupplier() {
      let arr = [];
      let arrList = [];
      this.supplierList.forEach(res => {
        this.supplierCenter.option.forEach(prop => {
          if (res == prop.value) {
            arr.push(prop);
          }
        });
      });
      if (this.supplierList.length > 0) {
        if (this.formData.length > 0) {
          arr.forEach(res => {
            let bool = this.formData.some(prop => {
              return res.value == prop.value;
            });
            if (!bool) {
              arrList.push(res);
            }
          });
          this.formData = [...arrList, ...this.formData];
        } else {
          this.formData = [...arr, ...this.formData];
        }
      } else {
        this.$message({
          type: "info",
          message: "请选择供应商"
        });
      }
      this.supplierList = [];
    },
    //删除
    handleClose(scope) {
      this.formData.splice(scope.$index, 1);
    },

    //确定
    confirm() {
      if (this.formData.length > 0) {
        let supplier_ids = [];
        this.formData.forEach(res => {
          supplier_ids.push(res.value);
        });
        let data = {
          account: this.dialog.account,
          supplier_class_codes: supplier_ids.join(",")
        };
        console.log(data, 8888);
        binkSupplierClass(data).then(res => {
          if (res.code == 0) {
            this.$message({
              message: res.message || res.msg,
              type: "success"
            });
            this.hideDialog();
          } else {
            this.$message({
              message: res.message || res.msg,
              type: "error"
            });
          }
        });
      } else {
        this.$message({
          type: "info",
          message: "请添加供应商"
        });
      }
    },
    //取消
    hideDialog() {
      this.formData = [];
      this.supplierList = [];
      this.dialog.centerDialogVisible = false;
    }
  }
};
</script>
<style scoped>
.el-tag {
  margin-right: 5px;
  margin-top: 2px;
}
</style>
